<template>
	<view style="margin-top: 24rpx;padding: 0 20rpx;">
		<view v-if="dataList && dataList.length>0">

			<view class="order" v-for="(item,index) in dataList" :key="index">
				<view class="order-number">
					<view class="number-left">
						<image src="../../static/kuaidi/number.png" mode="widthFix"></image>
						<text>{{ item.orderNumber }}</text>
					</view>
					<view class="number-right" :class="item.status == 3 ? 'green':item.status == 2?'blue':'red'">
						{{ isState(item.status) }}
					</view>
				</view>
				<!-- 	<view class="order-item">
					<image src="../../static/kuaidi/title.png" mode="widthFix"></image>
					<text style="font-size: 30rpx; color: #000000;" class="row1">{{ item.title }}</text>
				</view> -->
				<view class="order-item">
					<view>
						<image src="../../static/kuaidi/addrer.png" mode="widthFix"></image>
						<text>装货地：</text>
						<text>{{ item.deliveryStreet+item.deliveryAddress }}</text>
					</view>
				</view>
				<view class="order-item">
					<image src="../../static/kuaidi/maddres.png" mode="widthFix"></image>
					<text>卸货地：</text>
					<text>{{ item.pickupStreet+item.pickupAddress }}</text>
				</view>
				<view class="order-item">
					<image src="../../static/kuaidi/time.png" mode="widthFix"></image>
					<text>用车时间：</text>
					<text>{{ $uti.dateFormat(item.appointmentTime,'yyyy-MM-dd hh:mm:ss') }}</text>
				</view>
				<view class="order-bom">
					<view class="order-bom-left">装货地：{{ item.disance+'km' }}</view>
					<view class="order-bom-right">
						<!-- <view class="box1" @click="Transfer(item.orderId)">转派</view> -->
						<view class="box2" @click="jieOrder(item)">接单</view>
						<view class="box3" @click="telPhone(item.deliveryPhone)">联系雇主</view>
					</view>

				</view>

				<view class="order-price">

					<text>{{item.price}}</text>
					<text style="font-size: 30rpx;align-items: center;">￥</text>
				</view>
			</view>
			<u-loadmore :status="status" />
			<image src="/static/service.png"
				style="width:120rpx;height: 150rpx;position: fixed;bottom: 50rpx;left:20rpx" @click="makePhone"></image>
		</view>

		<view v-else style="margin-top: 200rpx;">
			<u-empty mode="order">
			</u-empty>
		</view>


		<!-- <u-popup mode="bottom" :show="!isLogin" round="10">
			<login @success="loginClose"></login>
		</u-popup> -->

		<u-popup :show="isShow" :safeAreaInsetBottom='false' :round="10" mode="center" @close="closeOrder"
			@open="openOrder">
			<view class="order_detils">
				<view style="text-align: center;width: 100%;">
					<text>订单详情</text>
				</view>

				<view class="template-view">
					<view class="address-view flex-between items-center">
						<view>
							<view class="address-tag" style="background: #00d969;color:#fff;">
								装
							</view>
						</view>
						<view style="margin-left: 10rpx;width:80%;">
							<view class="user-info" style="text-decoration: underline;"
								@click="telPhone(orderInfo.deliveryPhone)">
								{{orderInfo.deliveryName || '暂无地址'}} {{orderInfo.deliveryPhone || ''}}
							</view>
							<view class="address-info">
								{{orderInfo.deliveryProvince || '点击选择地址'}}{{orderInfo.deliveryCity || ''}}{{orderInfo.deliveryStreet || ''}}{{orderInfo.deliveryAddress || ''}}
							</view>
						</view>
						<view @click="daoHangView(1)">
							<!-- <u-icon name="arrow-right" size="16"></u-icon> -->
							<u-icon name="map" size="25"></u-icon>
						</view>
					</view>
					<view style="width:84%;height: 2rpx;background: #eee;margin:20rpx 0rpx;left:8%;position: relative;">

					</view>
					<view class="address-view flex-between items-center">
						<view>
							<view class="address-tag" style="background: #3c9cff;color:#fff;">
								卸
							</view>
						</view>
						<view style="margin-left: 10rpx;width:80%;">
							<view class="user-info" style="text-decoration: underline;"
								@click="telPhone(orderInfo.deliveryPhone)">
								{{orderInfo.pickName || '暂无地址'}} {{orderInfo.pickPhone || ''}}
							</view>
							<view class="address-info">
								{{orderInfo.pickupProvince || '点击选择地址'}}{{orderInfo.pickupCity || ''}}{{orderInfo.pickupStreet || ''}}{{orderInfo.pickupAddress || ''}}
							</view>
						</view>
						<view @click="daoHangView(2)">
							<u-icon name="map" size="25"></u-icon>
						</view>
					</view>

					<view style="width:84%;height: 2rpx;background: #eee;margin:20rpx 0rpx;left:8%;position: relative;">

					</view>

					<view class="address-view flex-between items-center">
						<view>
							<view class="address-tag" style="background: #ff4f69;color:#fff;">
								时
							</view>
						</view>
						<view style="margin-left: 10rpx;width:50%;">
							<view class="user-info">
								用车时间
							</view>
							<!-- <view class="address-info">
								{{orderInfo.pickupProvince || '点击选择地址'}}{{orderInfo.pickupCity || ''}}{{orderInfo.pickupStreet || ''}}{{orderInfo.pickupAddress || ''}}
							</view> -->
						</view>
						<view style="text-align: center;font-weight: 700;">
							<!-- <u-icon name="map" size="25"></u-icon> -->

							<text>{{ $uti.dateFormat(orderInfo.appointmentTime,'MM-dd hh:mm:ss') }}</text>
						</view>
					</view>
					<view style="width:84%;height: 2rpx;background: #eee;margin:20rpx 0rpx;left:8%;position: relative;">

					</view>

					<view class="address-view flex-between items-center">
						<view>
							<view class="address-tag" style="background: #005500;color:#fff;">
								费
							</view>
						</view>
						<view style="margin-left: 25rpx;width:70%;">
							<view class="user-info">
								用车费用
							</view>
							<!-- <view class="address-info">
								{{orderInfo.pickupProvince || '点击选择地址'}}{{orderInfo.pickupCity || ''}}{{orderInfo.pickupStreet || ''}}{{orderInfo.pickupAddress || ''}}
							</view> -->
						</view>
						<view style="text-align: center;font-weight: 700;">
							<!-- <u-icon name="map" size="25"></u-icon> -->

							<text style="font-size: 38rpx;color: red;">{{ orderInfo.price}}￥</text>
						</view>
					</view>




					<view style="margin-top: 40rpx;" @click="takingOrder">
						<u-button type="primary" color="#56caa3" text="接单"></u-button>
					</view>


				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import login from '../../components/login/login.vue'

	export default {
		components: {
			login
		},
		data() {
			return {
				isLogin: false,
				isShow: false,
				tabList: [{
						name: '全部',
						state: '1,-2,-1,120,102,103,104,301,2,3'
					},
					{
						name: '已付款',
						state: '1,120,102'
					},
					{
						name: '已接单',
						state: '103,104,301,2,3'
					},
					{
						name: '已退款',
						state: '-2,-1'
					}
				],
				orderInfo: {},
				current: 0,
				isload: true,
				page: 1,
				rows: 10,
				dataList: [],
				status: 'loading',
				location: undefined,
			}
		},
		onLoad() {
			var that = this;
			that.isLogin = that.$us.checkLogin();
			if (that.isLogin) {
				that.getList();
			}
			// that.getList();
			that.getLocat();
			// this.getLocation();
			// store.dispatch('userInfo', true)
			// this.$store.dispatch('getLocation')
			console.log('是否登陆', that.isLogin)

		},
		onShow() {
			var that = this;
			that.isLogin = that.$us.checkLogin();
		},
		methods: {


			daoHangView(e) {
				let that = this;
				console.log(that.orderInfo, "that.orderInfo")
				if (e == 1) {

					uni.openLocation({
						latitude: Number(that.orderInfo.deAdLatitude), // 目标纬度
						longitude: Number(that.orderInfo.deAdLongitude), // 目标经度
						// name: e.hardwareName,
						// address: e.hardwareAddress,
						success: function() {
							console.log('打开地图导航成功');
						},
						fail: function(err) {
							console.log('打开地图导航失败', err);
						}
					});

				} else {

					uni.openLocation({
						latitude: Number(that.orderInfo.pDLatitude), // 目标纬度
						longitude: Number(that.orderInfo.pDLongitudee), // 目标经度
						// name: e.hardwareName,
						// address: e.hardwareAddress,
						success: function() {
							console.log('打开地图导航成功');
						},
						fail: function(err) {
							console.log('打开地图导航失败', err);
						}
					});

				}

			},

			jieOrder(info) {
				this.orderInfo = info;
				this.isShow = true;
			},

			closeOrder() {
				this.isShow = false;
			},
			openOrder() {

			},
			takingOrder() {
				let that = this;
				that.$http.post('order/update', {
					// userGuid: that.$us.getId(),
					// orId: item.id
					orderId: that.orderInfo.id,
					// driveId: '17',

					
				}, function(res) {
					if(res.data.code==200){
						that.$uti.alert("已成功接单！");
						that.isShow = false;
						that.reload();
					}else{
						that.$uti.alert(res.data.msg);
					}

				}, '加载中...')

			},

			getLocat() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res, "resresresresresresresresresresres========")
						// commit('setLocation', {
						// 	longitude: res.longitude,
						// 	latitude: res.latitude,
						// })
						that.location = res
						that.getList();
					},
					fail(err) {
						console.log('进入回调:fail', err);
						that.getList();
					},
					complete() {

						console.log('进入回调:complete');
					}
				})
			},

			telPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					fail() {
						console.log("取消拨打");
					},
				});
				// uni.openLocation({
				// 	latitude: Number(this.location.latitude),
				// 	longitude: Number(this.location.longitude),
				// 	name: "测试" || ''
				// });

			},



			/**
			 * 订单状态
			 */
			isState(state) {
				if (state == 3) {
					return '已完成'
				} else if (state == 2) {
					return '进行中'
				} else {
					return '待接单'
				}
			},



			difference(item) {
				var that = this;
				that.$http.post('Order/PayOrderDifference', {
					userGuid: that.$us.getId(),
					orId: item.id
				}, function(res) {
					if (res.StatusCode == 1) {
						that.weChatPay(res.Data);
					} else {
						that.$uti.alert(res.Message);
					}
				}, '加载中...')
			},
			weChatPay(data) {
				var that = this;
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: '支付成功！',
							duration: 2000
						});
						setTimeout(function() {
							that.reload();
						}, 1000)
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							title: '已取消支付！',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			traces(item) {
				var that = this;
				if (!item.orTraces) {
					that.$uti.alert('没有物流信息');
					return;
				}

				var json = JSON.parse(item.orTraces);
				uni.setStorageSync('orTraces', json);
				that.$uti.toPage('/pages/order/logistics', {})
				console.log('物流信息', json)
			},
			cancelOrder(item) {
				var that = this;
				that.$uti.confirm('您确定取消订单吗？', function(res) {
					that.$http.post('Order/CancelOrder', {
						userGuid: that.$us.getId(),
						orId: item.id
					}, function(res) {
						that.$uti.alert(res.Message);
						if (res.StatusCode == 1) {
							that.reload();
						}
					}, '取消中...')
				})
			},
			click(e) {
				console.log(e);
				this.current = e.index;
				this.reload();
			},
			loginClose() {
				var that = this;
				that.isLogin = that.$us.checkLogin();
				if (that.isLogin) {
					that.getList();
				}
			},
			reload() {
				this.dataList = [];
				this.page = 1;
				this.isload = true;
				this.getList();
			},
			getList() {
				var that = this;
				if (!that.isload) {
					that.$uti.alert('没有更多数据了');
					return;
				}
				that.status = 'loading';
				// console.log(this.$store.getters.getLocations, "=2232==")
				that.$http.get('order', {
					// userGuid: that.$us.getId(),
					// state: that.tabList[that.current].state,
					// driveId: '17',
					page: that.page,
					size: that.rows,
					orderStatus: 'CREATED'
				}, function(res) {
					if (res.data.code == 200) {
						if (that.page * 10 < res.data.data.total) {
							that.status = 'loadmore';
							that.page++;
						} else {
							that.isload = false;
							that.status = 'nomore';
						}
						that.dataList = res.data.data.list

						if (that.location) {

							that.dataList.map(item => {
								console.log(item);
								let disance = that.$uti.getDistance(that.location.latitude, that.location
									.longitude, item.deAdLatitude, item.deAdLongitude);
								console.log(disance, "===")
								item.disance = disance;
							})

						}




						// res.Data.Result.forEach(item => {
						// 	item.statusText = '';
						// 	item.statusText = that.getStatus(item.state);

						// 	var name = that.$cfg.logList.find(_ => _.key == item.orShipperCode);
						// 	if (name && name.name)
						// 		item.orShipperName = name.name;

						// 	that.dataList.push(item);
						// })
						console.log('订单列表', that.dataList)
					} else {
						that.$uti.alert(res.Message);
						that.isload = false;
						that.status = 'nomore';
					}
				})
			},
			getStatus(text) {
				var status = '未知状态';
				switch (text.toString()) {
					case '0':
						status = '待支付'
						break;
					case '1':
						status = '待分配'
						break;
					case '-2':
						status = '支付失败'
						break;
					case '-1':
						status = '已取消'
						break;
					case '99':
						status = '调度异常'
						break;
					case '120':
						status = '待接单'
						break;
					case '102':
						status = '分配网点'
						break;
					case '103':
						status = '分配快递员'
						break;
					case '104':
						status = '待取件'
						break;
					case '301':
						status = '待揽件'
						break;
					case '2':
						status = '运输中'
						break;
					case '3':
						status = '已签收'
						break;
					default:
						status = '未知状态'
						break;
				}
				return status;
			}
		},
		onPullDownRefresh() {
			this.reload();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	@import url('index.css');

	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order_detils {
		padding: 30rpx;
	}

	.order {
		width: 100%;
		// height: 200rpx;
		position: relative;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		margin-bottom: 25rpx;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
				}
			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.order-price {
			position: absolute;
			top: 38%;
			right: 4%;
			font-size: 50rpx;
			font-weight: 700;
			color: red;
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 70rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 40rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}
			}
		}
	}
</style>